@import './mixin.styl'

body, html
  height 100vh
  overflow hidden

$btnWidth = 26px
$btnHeight = 26px
$white = #fff
$black = #324057
$danger = #FF4949
// -----------------------------------------------------------------------
$fs-s = 10px // small
$fs-n = 12px // normal 默认全局12px
$fs-m = 14px // middle
$fs-b = 16px // big
$fs-l = 18px // large
$fs-xl = 26px
$fs-xxl = 30px
$white = #fff
// Orange hsl(25, 100%, 50%)
$h = 210
$s = 100%
$l = 63%
// $h = 25
// $s = 100%
// $l = 53%
$blue = hsl($h, $s, $l)
$theme = $blue
$theme2 = hsl($h, $s, 69%)
$theme3 = hsl($h, $s, 77%)
$theme4 = hsl($h, $s, 83%)
$theme5 = hsl($h, $s, 89%)
$theme6 = hsl($h, $s, 95%)
$danger = #ee0a24
$info = #909399
$warning = #E6A23C
$success = #07c160
$sidebar-bg = #22242f
$sidebar-fc = #757993
$submenu-fc = #595961
$submenu-bg = #eaedf1
$page-bg = #f8f8f8
$page-content = #fff
$page-dark = $theme6
// $page-dark = #F2F6FC
$idx-page = 8
$idx-menu = 9
$idx-dialog = 10
$nav-h = 46px
// font-color
// black
$fc-b1 = #333 // dark
$fc-b2 = #666 // middle
$fc-b3 = #999 // light
// white
$fc-w1 = #bbb // dark
$fc-w2 = #ddd // middle
$fc-w3 = #fff // light
// border
$border = #EBEEF5
$border-w = #fff
// box-shadow
$box-shadow = 0 0 4px 0 rgba(#c8c8c8, 0.4)
// pc 最小分辨率
$pc-dpi = 1200px

bgi-center-contain(url)
  background-image url(url)
  background-position center
  background-size contain
  background-repeat no-repeat

scroll(direction)
  overflow-{direction} auto
  -webkit-overflow-scrolling touch

// scrollbar($width = 3px, $bgc = rgba(0,0,0,.2), $scrollbarTrack  = rgba(0,0,0,.05))
// ::-webkit-scrollbar
// width $width
// height 3px
// /* 定义滚动条轨道 内阴影+圆角 */
// ::-webkit-scrollbar-track
// border-radius 5px
// background-color $scrollbarTrack
// /* 定义滑块 内阴影+圆角 */
// ::-webkit-scrollbar-thumb
// background-color $bgc
// border-radius 5px
scrollbar($width = 3px, $height = 3px, $bgc = rgba(0, 0, 0, 0.2), $scrollbarTrack = rgba(0, 0, 0, 0.05))
  ::-webkit-scrollbar
    width $width
    height $height
  /* 定义滚动条轨道 内阴影+圆角 */
  ::-webkit-scrollbar-track
    border-radius 5px
    background-color $scrollbarTrack
  /* 定义滑块 内阴影+圆角 */
  ::-webkit-scrollbar-thumb
    background-color $bgc
    border-radius 5px

hover($color = $theme, $bgc = rgba(#000, 0))
  &:hover
    color $color !important
    cursor pointer
    background-color $bgc

.danger
  color $danger !important

.theme, .primary
  color $theme !important

.warning
  color $warning !important

.info
  color $info !important

.success
  color $success !important
// 字号
.fs-s
  font-size $fs-s !important // 10px // small

.fs-n
  font-size $fs-n !important // 12px // normal 默认全局12px

.fs-m
  font-size $fs-m !important // 14px // middle

.fs-b
  font-size $fs-b !important // 16px // big

.fs-l
  font-size $fs-l !important // 18px // large

.fs-xl
  font-size $fs-xl !important // 26px // extra large

.fs-xxl
  font-size $fs-xxl !important // 30px //extra extra large

// 字体颜色
// black
.fc-b1
  color $fc-b1 // dark = #333

.fc-b2
  color $fc-b2 // middle = #666

.fc-b3
  color $fc-b3 // light = #999

// white
.fc-w1
  color $fc-w1 // dark = #bbb

.fc-w2
  color $fc-w2 // middle = #ddd

.fc-w3
  color $fc-w3 !important // light = #fff

// border
$border-directions = {
  t: top,
  r: right,
  b: bottom,
  l: left
}

.border
  border 1px solid $border

.border-w
  border 1px solid $border-w

for dKey, dVal in $border-directions
  .bd-{dKey}
    border-{dVal} 1px solid $border

for dKey, dVal in $border-directions
  .bd-{dKey}-w
    border-{dVal} 1px solid $border-w

.border-bottom
  border-bottom 1px solid $border

// .opacity5
for val, key in 0 1 2 3 4 5 6 7 8 9
  .opacity{key}
    opacity val * 0.1 !important

// flex
.flex
  display flex

.flex-1
  flex 1 1 0%

.flex-auto
  flex 0 0 auto

.flex-center
  display flex
  justify-content center
  align-items center

$flex-direction = {
  r: row,
  rr: row-reverse,
  c: column,
  cr: column-reverse
}
$flex-wrap = {
  w: wrap,
  n: nowrap
}

// .ff-rn  flex-flow row nowarp .ff-crn
for dkey, dvalue in $flex-direction
  for wkey, wvalue in $flex-wrap
    .ff-{dkey}{wkey}
      display flex
      flex-flow dvalue wvalue

$flex-percent = 2...8

for value, key in $flex-percent
  $percent = (100 / value) + '%'

  .flex-{key + 2}
    flex 0 0 $percent
    width 0

$flex-jc = {
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around
}

// jc-center
for key, value in $flex-jc
  .jc-{key}
    display flex
    justify-content value

$flex-ai = {
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch
}

// ai-center
for key, value in $flex-ai
  .ai-{key}
    display flex
    align-items value

// spacing
$spacing-types = {
  mg: margin,
  pd: padding
}
$spacing-directions = {
  t: top,
  r: right,
  b: bottom,
  l: left
}
$spacing-sizes = 0 0.5 1 1.5 2 3
$spacing-px = 10px

// mg1 pd1 mgx1 pdy1
for tKey, tVal in $spacing-types
  for spacingVal, spacingKey in $spacing-sizes
    .{tKey}{spacingKey}
      if (spacingKey)
        {tVal} spacingVal * $spacing-px
      else
        {tVal} spacingVal * $spacing-px !important
    .{tKey}x{spacingKey}
      {tVal} 0 spacingVal * $spacing-px
    .{tKey}y{spacingKey}
      {tVal} spacingVal * $spacing-px 0

// mgt1 pdt1
for tKey, tVal in $spacing-types
  for dKey, dVal in $spacing-directions
    for spacingVal, spacingKey in $spacing-sizes
      .{tKey}{dKey}{spacingKey}
        {tVal}-{dVal} spacingVal * $spacing-px !important

// line-height
// .lh
for val, key in 1 1.5 2 2.5 3
  .lh{key + 1}
    line-height val * $fs-n !important

.inline-block
  display inline-block

.scroll-y
  display flex
  flex-direction column

  scroll('y')

.scroll-x
  display flex

  scroll('x')

body
  .press:active
    background-color #f2f3f5
    filter saturate(300%)
  .w100p
    width 100% !important
  .h100p
    height 100% !important
  // w10...w90,  w100 - w500 ... h10...
  for val in 1 .. 9
    .w{val * 10}
      width val * 10px !important
    .h{val * 10}
      height val * 10px !important
  for val in 2 .. 20
    .w{val * 50}
      width val * 50px !important
    .h{val * 50}
      height val * 50px !important

// 盒子阴影
.box-shadow
  box-shadow $box-shadow
  &:hover
    box-shadow 0 0 4px 0 rgba(#c8c8c8)

// 盒子内间距
.padding-spacing
  padding $fs-s

// 盒子外间距
.margin-spacing
  margin $fs-s

// 盒子圆角
.border-radius
  border-radius 6px

.box-sizing
  box-sizing border-box

.ctrl-icon
  color #333
  cursor pointer
  background-color rgba(#fff, 0.5)
  display flex
  align-items center
  justify-content center
  transition 0.3s
  border-radius 50%
  z-index 10
  &:hover
    background-color rgba(#fff, 0.9)

.round
  border-radius 50%

.margin-auto
  margin auto

.margin-xauto
  margin 0 auto

.margin-yauto
  margin auto 0

.overflow-hidden
  overflow hidden

.pf
  position fixed !important

.pr
  position relative !important

.pa
  position absolute !important

// -----------------------------------------------------------------------
.ctrl-bar
  position absolute
  right 5px
  top 5px
  z-index 5000
  .link
    display block
  .icon
    width $btnWidth
    height $btnHeight
    line-height $btnHeight
    margin-bottom 5px
    text-align center
    cursor pointer
    background-color rgba($danger, 0.88)
    border-radius 50%
    i
      color $white
      font-size 18px

.icon-outline
  .icon
    background-color transparent

    bd-1px(#fff, 50%)

.ctrl-bar-mid
  .icon
    width $btnWidth * 1.2
    height $btnHeight * 1.2
    line-height $btnHeight * 1.2
    i
      font-size 24px

.ctrl-bar-big
  .icon
    width $btnWidth * 2
    height $btnHeight * 2
    line-height $btnHeight * 2
    i
      font-size 36px

.ctrl-bar-top
  right 10px
  top 20px
  left auto
  bottom auto

.ctrl-bar-left
  left 10px
  bottom 20px
  top auto
  right auto

.ctrl-bar-right
  right 20px
  bottom 20px
  top auto
  left auto

.ctrl-bar-bottom
  left 50%
  bottom 12%
  top auto
  right auto
  transform translateX(-50%)

// 模块
.pano-wrap, .foot-menu, .modal
  position absolute
  left 0
  right 0
  bottom 0

.pano-wrap
  top 0
  z-index 2

.foot-menu
  z-index 10

// modal
.modal
  top 0
  z-index 100

.link-modal, .link-frame
  background-color $white

.head-page
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  z-index 100
  background-color #fff

.page
  full-cover()

  background-color rgba($black, 0.5)
  z-index 100

// table
table
  overflow-y auto
  thead
    tr
      width 100%
    th
      height 32px
      line-height 32px
      text-align center
      background linear-gradient(#fdfdfd, #f9f9f9)
      border-top 1px solid #e9e9e9
      border-bottom 1px solid #e9e9e9
      box-shadow 3px 3px 8px rgba(0, 0, 0, 0.04)
      color #666
      font-weight 400
    th.name
      text-align left
  .choose-col
    width 60px
  .operate-col
    width 120px
  .amount-col, .price-col, .total-col
    width 130px
  .name-col
    width 330px
  tbody
    width 100%
    text-align center
    tr, tr td
      padding 20px 0
      vertical-align middle
    .choose
      text-align center
      .el-checkbox__label
        display none
    .name
      .thumb
        width 80px
        height 80px
        border-radius 3px
        border 0 solid hsla(0, 0%, 100%, 0.5)
        box-shadow inset 0 0 0 1px rgba(0, 0, 0, 0.06)
        img
          width 100%
          height 100%
      .name-table
        max-width 180px
      .title
        padding 10px 0 0 10px
        font-size 14px
        line-height 24px
        color $black
      .attr
        font-size 12px
        color $black-light
  tfoot
    padding 0 20px
    tr
      background linear-gradient(#fdfdfd, #f9f9f9)
      border-top 1px solid #e9e9e9
      box-shadow 0 -3px 8px rgba(0, 0, 0, 0.04)
      td
        padding-bottom 15px
        vertical-align bottom
        .choose
          padding 0 20px
        .delete-select
          cursor pointer
        .goods-count
          border-right 1px solid #ddd
        .goods-total
          width 160px
          padding 0 10px
        .checkout
          button
            vertical-align bottom
            margin-top 20px

@media only screen and (min-width 700px)
  body
    .van-dialog
      padding 10px
      border-radius 5px
      .van-dialog__header
        text-align left
        padding-top 0
        color $fc-b1
      .van-dialog__message
        padding 15px 0
        display flex
        align-items center
        font-size 13px
        &:before
          font normal normal normal 14px / 1 'vant-icon'
          font-size 20px
          content '\F0E0'
          color $warning
          margin-right 8px
      .van-dialog__footer
        justify-content flex-end
        padding 8px 0 0
        .van-button
          height 28px
          line-height 26px
          flex 0 0 70px
          margin-left 10px
          font-size 13px
        .van-dialog__cancel
          color #323233
          background-color #fff
          border 1px solid #ebedf0
          border-radius 999px
        .van-dialog__confirm
          color #fff
          background-color #1989fa
          border 1px solid #1989fa
          border-radius 999px

.el-message
  z-index 9999 !important

.fade-enter
  opacity 0

.fade-enter-active
  animation fade 0.3s ease

.fade-leave-active
  animation fade 0.3s ease reverse

@keyframes fade
  0%
    opacity 0
  100%
    opacity 1